import { Component } from "react";
import axios from "../../ajax/ajax";
import Tablelist from "./Tablelist/Tablelist";
import { List, Typography, Divider, Button } from "antd";
import "./base.scss";

class base extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      isLoaded: false,
      opacity:1
    };
  }
  //当组件输出到 DOM 后会执行 componentDidMount()
  componentDidMount() {
    const _this = this; //先存一下this，以防使用箭头函数this会指向我们不希望它所指向的对象。
    axios({ url: "https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists" })
      .then(function (response) {
        console.log(response, "===");
        _this.setState({
          users: response.data,
          isLoaded: true,
        });
      })
      .catch(function (error) {
        console.log(error);
        _this.setState({
          isLoaded: false,
          error: error,
        });
      });

    // js 动画处理了
    this.timer = setInterval(
      function () {
        var { opacity } = this.state;
        opacity -= 0.2;
        if (opacity < 0.1) {
          opacity = 1.0;
        }
        this.setState({
          opacity,
        });
      }.bind(this),
      500
    );
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    let arr = ["one", "tow", "three"];
    let arr1 = [
      <h1 key="1">hello world</h1>,
      <h2 key="2">react is awesome</h2>,
    ];
    const data = [
      "Racing car sprays burning fuel into crowd.",
      "Japanese princess to wed commoner.",
      "Australian walks 100km after outback crash.",
      "Man charged over missing wedding girl.",
      "Los Angeles battles huge wildfires.",
    ];
    let style = { background: "#0ff" };
    return (
      <div>
        <div>for 循环</div>
        {arr.map((item, index) => {
          return <div key={index}>顺序{item}</div>;
        })}
        数组扩展
        <div>{arr1}</div>
        封装自定义组件
        <Tablelist users={this.state.users}></Tablelist>
        css 样式
        <div>
          <div className="external">外联数据</div>
          <div style={{ color: "#f0f" }}>内联样式</div>
          <div style={style}>内联样式</div>
        </div>
        opacity动画
        <div style={{ opacity: this.state.opacity }}>opacity动画</div>
        引入ant 组件
        <Button type="primary">Primary</Button>
        <Divider orientation="left">Default Size</Divider>
        <List
          header={<div>Header</div>}
          footer={<div>Footer</div>}
          bordered
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              <Typography.Text mark>[ITEM]</Typography.Text> {item}
            </List.Item>
          )}
        />
      </div>
    );
  }
}

export default base;
